<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shandow="never" class>
        <!-- 目录管理 -->
        <el-row class="directorys-sel-row">
          <el-form
            :model="articlesQuery"
            label-position="left"
            label-width="80px"
          >
            <el-form-item label="关键字">
              <el-input v-model="articlesQuery.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="articlesQuery.state">
                <el-option
                  v-for="(item, index) in status"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button @click="clearInput">清除</el-button>
          <el-button type="primary" @click="toSearch">搜索</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="addSkillDialog = true"
            >新增技巧</el-button
          >
        </el-row>
        <el-row>
          <el-alert
            :title="'数据一共' + articlesTotal + '条'"
            type="info"
            show-icon
            :closable="false"
          ></el-alert>
        </el-row>
        <!-- 数据列表 -->
        <!-- 数据表格部分 -->
        <el-table :data="articlesList" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column label="文章标题" width="400">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
              <i
                :class="scope.row.videoURL ? 'el-icon-film' : false"
                @click="toPlayVideo(scope.row.videoURL)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width></el-table-column>
          <el-table-column
            prop="username"
            label="录入人"
            width
          ></el-table-column>
          <el-table-column label="录入时间" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width>
            <template slot-scope="scope">
              <span>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="subjectName" label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="text" @click="articlesDetails(scope.row.id)"
                >预览</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.state !== 1"
                @click="prohibit(scope.row)"
                >启用</el-button
              >
              <el-button type="text" v-else @click="prohibit(scope.row)"
                >禁用</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="updataArticel(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="removeArticel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页结构 -->
        <el-pagination
          @size-change="handleSizeChange"
          :show-close="false"
          @current-change="handleCurrentChange"
          :current-page="articlesQuery.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="articlesQuery.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="articlesTotal"
        ></el-pagination>
      </el-card>
      <!-- 视频预览弹层 -->
      <el-dialog
        class="video_dialog"
        :visible.sync="articlesVideoShow"
        :show-close="false"
        width="40%"
      >
        <el-button
          class="closeVideo"
          icon="el-icon-close"
          circle
          @click="articlesVideoShow = false"
        ></el-button>
        <video
          width="100%"
          :src="activeURL"
          autoplay
          v-if="articlesVideoShow"
          controls
        ></video>
      </el-dialog>
      <!-- 新增技巧弹层 -->
      <el-dialog
        title="新增文章"
        :visible.sync="addSkillDialog"
        width="50%"
        :before-close="closeAddSkill"
      >
        <articals-add
          @getArticlesListAgin="getArticlesList()"
          @close="addSkillDialog = false"
          v-if="addSkillDialog"
        >
        </articals-add>
      </el-dialog>
      <!-- 修改技巧弹层 -->
      <el-dialog
        title="修改文章"
        :visible.sync="editSkillDialog"
        width="50%"
        :before-close="closeeditSkill"
      >
        <articals-add
          :editData="editData"
          @getArticlesListAgin="getArticlesList()"
          @close="editSkillDialog = false"
          v-if="editSkillDialog"
        ></articals-add>
      </el-dialog>
      <!-- 试题预览 -->
      <el-dialog
        title="预览文章"
        class="previewdialog"
        :visible.sync="PreviewSkillDialog"
        width="60%"
        :before-close="closePreviewSkill"
      >
        <articals-preview :details="details"></articals-preview>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import {
  list as articlesList,
  add as addArtical,
  detail as ArticalDetail,
  changeState,
  remove
} from '@/api/hmmm/articles'
import hljs from 'highlight.js'
import 'highlight.js/styles/tomorrow.css'
import ArticalsPreview from '../components/articles-preview'
import ArticalsAdd from '../components/articles-add'
export default {
  components: {
    ArticalsPreview,
    ArticalsAdd
  },
  data() {
    return {
      articlesQuery: {
        // 状态
        state: null,
        // 关键字
        keyword: '',
        page: 1,
        // 每页显示条数
        pagesize: 10
      },
      status,
      // 文章列表
      articlesList: [],
      // 文章总数
      articlesTotal: 0,
      // 控制面试技巧视频弹窗显示隐藏
      articlesVideoShow: false,
      // 点击时的视频url
      activeURL: '',
      // 控制新增技巧弹层
      addSkillDialog: false,
      // 控制预览文章弹层显示隐藏
      PreviewSkillDialog: false,
      // 文章详情数据
      details: {},
      // 控制编辑弹层
      editSkillDialog: false,
      // 编辑需要处理的数据
      editData: {}
    }
  },
  created() {
    this.getArticlesList()
  },
  methods: {
    // 获取文章数据
    async getArticlesList() {
      const data = await articlesList(this.articlesQuery)
      // console.log(data.data.items)
      if (data.status === 200) {
        this.articlesTotal = data.data.counts
        this.articlesList = data.data.items
      } else {
        this.$message.error('获取数据失败,请刷新重试')
      }
    },
    // 当前每页显示数据数改变后的回调
    handleSizeChange(newPadeSize) {
      // console.log(newPadeSize)
      this.articlesQuery.pagesize = newPadeSize
      this.getArticlesList()
    },
    // 页码改变后回调
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.articlesQuery.page = newPage
      this.getArticlesList()
    },
    // 播放视频
    toPlayVideo(url) {
      this.articlesVideoShow = true
      // console.log(url)
      this.activeURL = url
    },
    // 搜索处理
    toSearch() {
      // console.log(this.articlesQuery)
      this.getArticlesList()
    },
    // 清空搜索输入框
    clearInput() {
      this.articlesQuery.state = null
      this.articlesQuery.keyword = ''
      this.getArticlesList()
    },
    // 新增技巧弹层关闭回调
    closeAddSkill() {
      this.addSkillDialog = false
    },
    // 编辑弹层关闭回调
    closeeditSkill() {
      this.editSkillDialog = false
    },
    // 预览部分函数
    closePreviewSkill() {
      this.PreviewSkillDialog = false
    },
    // 获取文章详情
    async articlesDetails(id) {
      this.PreviewSkillDialog = true
      const { data } = await ArticalDetail({ id })
      // console.log(data)
      this.details = data
    },
    // 启用/禁用功能
    async prohibit(row) {
      const changeData = {
        id: row.id,
        state: row.state === 1 ? 0 : 1
      }
      const data = await changeState(changeData)
      // console.log(data)
      if (data.status !== 200) {
        this.$message.error('操作失败')
      } else {
        this.getArticlesList()
        this.$message.success('修改成功')
      }
    },
    // 删除功能
    removeArticel(id) {
      this.$confirm('此操作将删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await remove({ id })
          // console.log(data)
          if (data.status === 200) {
            this.$message.success('删除成功')
            this.getArticlesList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 点击修改
    updataArticel(row) {
      // console.log(row)
      this.editData = row
      this.editSkillDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
.directorys-sel-row {
  display: flex;
  height: 36px;
  margin-bottom: 15px;
  .el-form {
    display: flex;
    height: 100%;
  }
  .el-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 100%;
    margin-left: 15px;
    font-size: 12px;
    &:last-child {
      width: 100px;
      position: absolute;
      right: 0px;
    }
  }
}
.el-table {
  width: 100% !important;
  margin-top: 16px;
}
.el-pagination {
  margin-top: 16px;
  text-align: right;
}
.cell {
  i {
    margin-left: 10px;
    font-size: 18px;
    color: #0000ff;
    cursor: pointer;
  }
}
.video_dialog {
  // position: relative;
  border-radius: 0;
  .closeVideo {
    position: absolute;
    left: 50%;
    transform: translate(50%, -50%);
    top: -76px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 26px;
    border: none;
    padding: 0;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
    height: 430px;
    width: 765px;
  }
  ::v-deep .el-dialog__header {
    background-color: #fff;
    padding: 0;
  }
}
::v-deep .el-dialog__footer {
  text-align: right;
}
.previewdialog {
  ::v-deep .el-dialog__body {
    padding: 0 20px 20px 20px;
  }
}
</style>
